


import React, { useRef } from 'react';
import { Image, Popover } from 'antd'
import { MsgBase } from './Base';
import { IAiPicItem, IMessageItem } from './type';
import { ImageViewer } from 'antd-mobile';
interface IPreviewMap { 
    [key: number | string]: {
        src: string;
        visible:boolean
    }
}
export function MessagePic(props: { message: IMessageItem; isH5?: boolean; onCheckHighPic: (pic: IAiPicItem,msg:IMessageItem) => void;onToEdit:(pic:IAiPicItem)=>void}) {
    const [previewMap, setPreviewMap] = React.useState<IPreviewMap>({});
    const picAreaRef = useRef<HTMLDivElement>(null);

    const message = props.message
    return (
        <div className="picArea" ref={ picAreaRef}>
            <div className="picList">
                {(message.picList || []).map(pic => {
                    const isSynthesis = pic.isSynthesis
                    const previewPic = pic.preview.includes('http')?pic.preview:('https:'+pic.preview)
                    if(props.isH5 && isSynthesis)return null
                    return (
                        <div className={`picItem ${isSynthesis?'synthesis':''}`} key={pic.id}>
                            <div className="pic">
                                { !props.isH5?<Image
                                    src={ previewPic}
                                    preview={{
                                        src: previewMap[pic.id]?.src || previewPic,
                                        visible: previewMap[pic.id]?.visible,
                                        // maskClassName: 'previewMask',
                                        getContainer: () => picAreaRef.current as HTMLDivElement,
                                        onVisibleChange: (value) => {
                                            setPreviewMap({
                                                ...previewMap,
                                                [pic.id]: {
                                                    ...previewMap[pic.id],
                                                    visible:value
                                                }
                                            });
                                        },
                                    }}
                                /> :
                                    <>
                                        <img src={previewPic} alt="" onClick={() => { 
                                            setPreviewMap({
                                                ...previewMap,
                                                [pic.id]: {
                                                    ...previewMap[pic.id],
                                                    visible:true
                                                }
                                            });
                                        }} />
                                        {previewMap[pic.id]?.visible ? <>
                                            <span onClick={() => { 
                                                setPreviewMap({
                                                    ...previewMap,
                                                    [pic.id]: {
                                                        ...previewMap[pic.id],
                                                        visible:false
                                                    }
                                                });
                                            }} className='exitPreviewBtn'>退出预览</span> 
                                            <p className='operatorBtns'>
                                                { message.isBig?null:<span onClick={(e) => { 
                                                    e.stopPropagation()
                                                    // 这里是放大生成新的一条
                                                    props.onCheckHighPic(pic, message)
                                                    setPreviewMap({
                                                        ...previewMap,
                                                        [pic.id]: {
                                                            ...previewMap[pic.id],
                                                            visible:false
                                                        }
                                                    });
                                                }}>
                                                    放大图片
                                                    <b>生成细节更多高清图，消耗1点</b>
                                                </span>}
                                                <span onClick={() => { 
                                                    props.onToEdit(pic)
                                                }}>
                                                    保存到我的上传
                                                </span>
                                            </p>
                                        </> : null}
                                        
                                        <ImageViewer
                                            maxZoom={ 0.5}
                                            image={previewPic}
                                            visible={previewMap[pic.id]?.visible}
                                            onClose={() => {
                                                setPreviewMap({
                                                    ...previewMap,
                                                    [pic.id]: {
                                                        ...previewMap[pic.id],
                                                        visible:false
                                                    }
                                                });
                                            }}
                                        />
                                    </>
                                }
                                
                            </div>
                            { (pic.isdel && !isSynthesis)?<div className="prohibit">
                                <i className='iconfont icon-tupiantishi'></i>
                                <span>图片涉嫌违规啦!</span>
                                <span>已返还生成点数</span>
                            </div>:null}
                            { pic.isSynthesis || props.isH5 ?null:<div className="coverArea" onClick={() => { 
                                setPreviewMap({
                                    ...previewMap,
                                    [pic.id]: {
                                        ...previewMap[pic.id],
                                        visible:true
                                    }
                                });
                            }}>
                                <>
                                    <span className="btn" onClick={e => { 
                                        e.stopPropagation()
                                        props.onToEdit(pic)
                                    }}>编辑</span>
                                        {message.isBig ? null :
                                            <Popover content={`生成细节更多高清图，消耗1点`} getPopupContainer={ triggerNode=>triggerNode.parentElement as HTMLElement}>
                                            <span className="btn" onClick={(e) => { 
                                                e.stopPropagation()
                                                // 这里是放大生成新的一条
                                                props.onCheckHighPic(pic,message)
                                            }}>放大</span>
                                        </Popover>
                                            
                                        }
                                </>
                                
                            </div>}
                        </div>
                    )
                })}
            </div>
        </div>
    )
}